<%@page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: no-repeat 0 0;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            background-color: #888888;
            background-image: url("imgs/Desert1.jpg");
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        /* 登录内容区域样式（此处假设和注册区域有类似结构，可按需调整） */
        #loginDiv {
            width: 30%;
            display: flex;
            flex-direction: column; /* 改为垂直排列 */
            justify-content: center;
            align-items: center;
            height: 380px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }

        /* 重置浮动相关样式 */
        .clear {
            clear: both;
        }

        .clear:before,
        .clear:after {
            content: "";
            display: table;
        }

        .clear:after {
            clear: both;
        }

        /* 表单主体样式，修改了margin实现水平居中 */
        .form-div {
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
            width: 37%;
            display: flex;
            flex-direction: column; /* 改为垂直排列 */
            justify-content: center;
            align-items: center;
            height: 380px;
        }

        .form-div table {
            margin: 0 auto;
            text-align: center;
            color: rgba(30, 30, 30, 1.00); /* 文字颜色调深 */
        }

        /* 表单内各类输入框通用样式，减小输入框之间的间隔 */
        .form-div input[type="text"],
        .form-div input[type="password"] {
            width: 202px;
            margin: 5px; /* 减小外边距，让输入框之间距离更近 */
            line-height: 20px;
            font-size: 16px;
        }

        .form-div input[type="checkbox"] {
            margin: 15px 0 15px 10px; /* 适当减小上下外边距 */
        }

        .form-div input[type="button"],
        .form-div input[type="submit"],
        .form-div input[type="reset"] { /* 新增对reset按钮的样式统一处理 */
            margin: 10px 20px 0 0;
        }

        /* 表单内表格样式，调整文本对齐为居中，文字颜色调深 */
        .form-div table {
            margin: 0 auto;
            text-align: center;
            color: rgba(30, 30, 30, 1.00); /* 文字颜色调深 */
        }

        .form-div table img {
            vertical-align: middle;
            margin: 0 0 5px 0;
        }

        /* 页脚样式，文字颜色调深（如果登录页面有页脚元素的话，可按需调整） */
        .footer {
            color: rgba(30, 30, 30, 1.00);
            font-size: 12px;
            margin-top: 30px;
        }

        /* 按钮所在区域样式，去掉float让按钮能更好居中 */
        .form-div.buttons {
            text-align: center;
        }

        /* 各类输入框样式 */
        input[type="text"],
        input[type="password"] {
            border-radius: 5px;
            border-style: hidden;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
            height: 30px;
        }

        input[type="text"]:focus,
        input[type="password"]:focus {
            border: 1px solid #50afeb;
            outline: none;
        }

        input[type="button"],
        input[type="submit"],
        input[type="reset"] { /* 新增对reset按钮的样式统一处理 */
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }

        input[type="button"]:hover,
        input[type="submit"]:hover,
        input[type="reset"]:hover { /* 新增对reset按钮的悬停样式处理 */
            background-color: #5a88c8;
        }

        input[type="button"]:active,
        input[type="submit"]:active,
        input[type="reset"]:active { /* 新增对reset按钮的激活样式处理 */
            background-color: #5a88c8;
        }

        /* 错误提示信息样式（如果登录页面有对应错误提示显示的话，可按需调整） */
        .err_msg {
            color: red;
            padding-right: 170px;
        }

        #password_err {
            padding-right: 195px;
        }

        /* 登录按钮样式，调整使其水平居中 */
        #login_btn {
            display: block;
            margin: 20px auto;
            width: 285px;
            height: 45px;
        }

        /* 表格内单元格样式，确保内容水平和垂直居中，减小高度让行更紧凑 */
        td {
            padding: 0;
            height: 60px; /* 减小高度值，让表格行更紧凑 */
            text-align: left;
            vertical-align: middle;
        }

        th {
            padding: 0;
            height: 60px; /* 减小高度值，让表格行更紧凑 */
            text-align: right;
            vertical-align: middle;
        }

        #name_trip {
            margin-left: 50px;
            color: red;
        }

        form {
            display: flex;
            flex-direction: column; /* 垂直排列表单元素 */
            width: 100%; /* 使表单宽度填满容器 */
        }

        form p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中对齐 */
        }

        #remember {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            padding-left: 10px;
            height: 20px;
            width: 20px;
        }

        #userName {
            width: 202px;
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }

        /*#password {
            width: 202px;
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }*/

        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }

        #subDiv {
            text-align: center;
            margin-top: 30px;
        }

        #loginMsg {
            text-align: center;
            color: aliceblue;
        }

        #registerMsg {
            text-align: center;
            color: aliceblue;
        }

        #errorMsg {
            text-align: center;
            color: red;
        }

        a {
            text-decoration: none; /* 去掉下划线 */
        }
    </style>
</head>

<body>
<div id="loginDiv" style="height: 350px">
    <form action="http://localhost/LoginController/login" method="post" accept-charset="UTF-8" id="form">
        <h1 id="loginMsg">登 录</h1>
        <table>
            <tr>
                <th>用户名:</th>
                <td>
                    <input id="username" name="userName" type="text">
                </td>
                <td>
                    <div id="usernameError" style="color: red; display: none;">用户名不能为空或用户名错误</div>
                </td>
            </tr>
            <tr>
                <th>密码:</th>
                <td>
                    <input id="password" name="password" type="password">
                </td>
                <td>
                    <div id="passwordError" style="color: red; display: none;">密码不能为空或密码错误</div>
                </td>
            </tr>
            <tr>
                <th>验证码:</th>
                <td>
                    <input type="text" name="validationCode" onkeydown="if(event.keyCode===13){form.submit();}"
                           size="6">
                    <%
                        int intmethod1 = (int) ((Math.random() * 9) + 1);  // 1 - 9避免首位为0
                        int intmethod2 = (int) ((Math.random() * 10));
                        int intmethod3 = (int) ((Math.random() * 10));
                        int intmethod4 = (int) ((Math.random() * 10));
                        String intsum = intmethod1 + "" + intmethod2 + intmethod3 + intmethod4;
                    %>
                    <img src="./page/<%=intmethod1%>.png" alt="<%=intmethod1%>">
                    <img src="./page/<%=intmethod2%>.png" alt="<%=intmethod2%>">
                    <img src="./page/<%=intmethod3%>.png" alt="<%=intmethod3%>">
                    <img src="./page/<%=intmethod4%>.png" alt="<%=intmethod4%>">
                </td>
                <td>
                    <input type="hidden" name="validationCode1" value="<%=intsum%>">
                </td>
            </tr>
        </table>
        <div id="subDiv">
            <input type="submit" class="button" value="登录">
            <input type="reset" class="button" value="重置">&nbsp;&nbsp;&nbsp;
        </div>
    </form>
    <br>
    <h3><a href="http://localhost/register/register.jsp">没有账号？点击注册</a></h3>
</div>
<script>
    // 检查用户名是否为空的函数
    function checkUsername() {
        var username = $("#username").val();
        var usernameErrorDiv = $("#usernameError");
        if (username === "") {
            usernameErrorDiv.text("用户名不能为空").show();
            return false;
        }
        usernameErrorDiv.hide();
        return true;
    }

    // 检查密码是否为空的函数
    function checkPassword() {
        var password = $("#password").val();
        var passwordErrorDiv = $("#passwordError");
        if (password === "") {
            passwordErrorDiv.text("密码不能为空").show();
            return false;
        }
        passwordErrorDiv.hide();
        return true;
    }

    // 处理登录错误的函数，根据后端返回的错误信息展示相应提示
    function handleLoginError(error) {
        if (error.userNameError) {
            $("#usernameError").text(error.userNameError).show();
        }
        if (error.passwordError) {
            $("#passwordError").text(error.passwordError).show();
        }
        if (error.validationCodeError) {
            alert(error.validationCodeError);
        }
    }

    $(document).ready(function () {
        // 当用户名输入框内容改变时，触发检查用户名是否为空的函数
        $("#username").on("input", checkUsername);
        // 当密码输入框内容改变时，触发检查密码是否为空的函数
        $("#password").on("input", checkPassword);

        $("#form").on("submit", function (e) {
            var validationCode = $("input[name='validationCode']").val();
            var validationCode1 = $("input[name='validationCode1']").val();
            if (!checkUsername() || !checkPassword() || validationCode === "" || validationCode !== validationCode1) {
                if (validationCode === "") {
                    alert("验证码不能为空");
                } else if (validationCode !== validationCode1) {
                    alert("验证码错误，请重新输入");
                }
                e.preventDefault();
            } else {
                // 使用Ajax发送登录请求
                $.ajax({
                    url: "http://localhost/LoginController/login",
                    type: "POST",
                    data: $("#form").serialize(),
                    success: function (response) {
                        // 处理后端返回的登录错误信息，展示相应提示
                        handleLoginError(response);
                        if (!response.userNameError && !response.passwordError && !response.validationCodeError) {
                            window.location.href = "http://localhost/main/main.jsp";
                        }
                    },
                    error: function () {
                        alert("登录请求失败，请稍后再试");
                    }
                });
                e.preventDefault();
            }
        });
    });
</script>
</body>

</html>